<template>
  <div class="conditionList_parent" :class="[parentIndex>-1?'hasConditionBtn':'parent', vClass]" v-if="initConfig">
    <template v-for="(item, index) in initCondition.conditionList" v-bind:key="item.key">
      <template v-if="item.conditionList && initConfig">
        <conditionTemp :condition="item" :parentIndex="index" :config="initConfig"
                       :vClass="index===0?'start':(index === initCondition.conditionList.length-1?'end':'')"
                       @mergeCondition="mergeCondition"></conditionTemp>
      </template>
      <div class="conditionList_parent_child" v-else>
        <div class="conditionList_parent_child_input"
             :class="[initCondition.conditionList.length > 1? 'hasConditionBtn' : '', index===0?'start':(index === initCondition.conditionList.length-1?'end':'')]">
          <el-select placeholder="选择项" v-model="item.key" size="small" @change="item.value = null">
            <template v-for="column in initConfig.column||[]" v-bind:key="column.prop">
              <el-option
                  :label="column.label"
                  :value="column.prop"
                  v-if="column.type !== 'split'
                  && column.type !== 'labels'
                  && column.type !== 'image'
                  && column.type !== 'location'
                  && column.formShow"></el-option>
            </template>
          </el-select>
          <el-select placeholder="选择条件" v-model="item.cond" size="small"></el-select>

          <template v-if="item.key && getSelectItem(item)">
            <el-select style="width: 100%" size="small" v-if="['select', 'radio'].indexOf(getSelectItem(item).type) > -1"
                       :filterable="getSelectItem(item).form.filterable"
                       :remote="getSelectItem(item).form.remote"
                       :remote-method="(query)=>{onRemoteMethodEvent(query, getSelectItem(item))}"
                       :multiple="getSelectItem(item).form.multiple"
                       @change="onChangeSelectEvent($event, getSelectItem(item), tableForm)" v-model="item.value">
              <template v-if="getSelectItem(item).dicKey">
                <el-option v-for="dic in getSelectItem(item).dicData" v-bind:key="dic.key" :label="dic.name"
                           :value="dic.key"></el-option>
              </template>
              <template v-else>
                <el-option v-for="dic in getSelectItem(item).dicData" v-bind:key="dic.id" :label="dic[getSelectItem(item).dicLabel]"
                           :value="dic[getSelectItem(item).dicId]"></el-option>
              </template>
            </el-select>
            <el-input v-model="item.value" size="small" v-else>
              <template #prepend v-if="getSelectItem(item).form.prependLabel">{{ getSelectItem(item).form.prependLabel }}</template>
              <template #append v-if="getSelectItem(item).form.appendLabel">{{ getSelectItem(item).form.appendLabel }}</template>
            </el-input>
          </template>

          <div class="changeConditionBtn" :class="item.andOr" v-on:click="item.andOr= (item.andOr==='and'?'or':'and')">
            {{ item.andOr === 'and' ? '并' : '或' }}
          </div>
        </div>
        <div class="conditionList_parent_child_split el-icon-scissors" v-on:click="splitCondition(item, index)"></div>
        <div class="conditionList_parent_child_delete el-icon-minus" v-on:click="deleteCondition(item, index)"></div>
      </div>
    </template>
    <div class="conditionList_parent_add el-icon-plus"
         v-on:click="initCondition.conditionList.push({key: null, cond: null,val: null ,andOr: 'and'})"></div>
    <div class="changeConditionBtn" :class="initCondition.andOr"
         v-on:click="initCondition.andOr= (initCondition.andOr==='and'?'or':'and')">
      {{ initCondition.andOr === 'and' ? '并' : '或' }}
    </div>
  </div>
</template>

<script>
import {reactive, computed } from "vue"

export default {
  name: "conditionTemp",
  components: {},
  props: {
    condition: Object,
    parentIndex: {
      type: Number,
      default: -1
    },
    vClass: String,
    config: Object
  },
  data() {
    return {}
  },
  methods: {},
  watch: {},
  setup(prop, that) {
    let initCondition = reactive(prop.condition)
    let initConfig = reactive(prop.config)
    let initParentIndex = reactive(prop.parentIndex)

    const splitCondition = function (item, index) {
      initCondition.conditionList.splice(index, 1)
      initCondition.conditionList.splice(index, 0, {
        key: 2,
        conditionList: [item, {
          key: null,
          cond: null,
          val: null,
          andOr: "and"
        }],
        andOr: "and"
      })
    }

    const deleteCondition = function (item, index) {
      initCondition.conditionList.splice(index, 1)
      if (initCondition.conditionList.length === 1) {
        that.emit("mergeCondition", {
          index: initParentIndex,
          item: initCondition.conditionList[0]
        })
      }
    }

    const mergeCondition = function (e) {
      initCondition.conditionList[e.index] = e.item
    }

    const getSelectItem = computed (() => {
      return function (item) {
        let selectItem = initConfig.column.find(c => {
          return c.prop === item.key
        })
        return selectItem || {}
      }
    })

    return {initCondition, initConfig, splitCondition, deleteCondition, mergeCondition, getSelectItem}
  }
}
</script>
<style scoped lang="scss">
.conditionList_parent {
  border: 1px dashed var(--primary-light);
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box;

  .changeConditionBtn {
    display: none;
  }

  &.parent {
    padding: 0px 40px 0px 0px;
    border: 0;
  }

  &:hover {
    border-color: var(--primary);
  }

  .conditionList_parent_child {
    width: 100%;
    height: 50px;
    position: relative;
    border: 1px dashed var(--border-bb);
    border-radius: 5px;
    margin: 5px 0;
    box-sizing: border-box;

    &:hover {
      border-color: var(--danger);

      .conditionList_parent_child_split,
      .conditionList_parent_child_delete {
        display: block;
      }
    }

    .conditionList_parent_child_delete,
    .conditionList_parent_child_split {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 50%;
      border-radius: 100px;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      transform: translate(0, -50%);
      cursor: pointer;
      color: #fff;
      display: none;
    }

    .conditionList_parent_child_delete {
      background: var(--danger);
      right: -12px;

      &:hover {
        background: var(--danger-dark);
      }
    }

    .conditionList_parent_child_split {
      background: var(--warning);
      left: -12px;

      &:hover {
        background: var(--warning-dark);
      }
    }

    .conditionList_parent_child_input {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 5px;
      justify-content: space-between;
      position: relative;

      :deep(.el-select),
      :deep(.el-input) {
        margin-right: 5px;
      }
    }
  }

  .conditionList_parent_add {
    width: 100%;
    height: 40px;
    position: relative;
    text-align: center;
    line-height: 40px;
    color: var(--font-hd);
    margin-top: 5px;
    border-radius: 5px;
    border: 1px dashed var(--border-bb);

    &:hover {
      background: var(--primary-light);
      border-color: var(--primary);
      color: var(--primary);
    }
  }
}

.hasConditionBtn,
:deep(.hasConditionBtn) {
  position: relative;

  &.start {
    &:before {
      height: 50%;
      top: 50%;
    }
  }

  &.end {
    &:before {
      height: 50%;
    }

    > .changeConditionBtn {
      display: none;
    }
  }

  &:after {
    content: "";
    width: 20px;
    height: 0px;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translate(0, -50%);
    border-bottom: 1px solid var(--border-ba);
  }

  &:before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    right: -21px;
    top: 0;
    border-left: 1px solid var(--border-ba);
  }

  .changeConditionBtn {
    width: 22px;
    height: 22px;
    line-height: 22px;
    position: absolute;
    top: calc(100% - 11px);
    right: -31px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 100px;
    z-index: 1;
    display: block;

    &.and {
      background: var(--primary);
    }

    &.or {
      background: var(--danger);
    }
  }
}
</style>
